<template>
	<div class="panel">
		<div class="condition">
			<div class="row_one">
				<el-select v-model="param.schoolYearId" clearable placeholder="全部学年" style="width: 1.8rem;">
					<el-option v-for="item in schoolYearList" :key="item.schoolYearId" 
						:label="item.name" :value="item.schoolYearId">
					</el-option>
				</el-select>
				&nbsp;
				<el-select v-model="param.classId" clearable placeholder="全部班级" style="width: 1.8rem;">
					<el-option v-for="item in classList" :key="item.classId" 
						:label="item.name" :value="item.classId">
					</el-option>
				</el-select>
				&nbsp;

				<el-date-picker v-model="entryTime" type="daterange" align="center" style="width: 2.8rem;" 
					unlink-panels range-separator="至" start-placeholder="入园日期起" 
					end-placeholder="入园日期止" :picker-options="pickerOptions">
				</el-date-picker>
				
				&nbsp;
				<el-input style="width: 3.5rem;" placeholder="搜索 学员姓名/手机号/联系人" clearable v-model="param.keyword" class="input_search" maxlength="100">
				</el-input>
				&nbsp;
				<div class="search_btn" @click="search()">搜索</div>
			</div>
		</div>

		<div>
			<table class="table" cellspacing="0">
				<thead class="thead">
					<tr>
						<td style="width: 2rem;">孩子姓名</td>
						<td style="width: 2rem;">出生日期</td>
						<td style="width: 2rem;">班级</td>
						<td style="width: 2rem;">入园日期</td>
						<td style="width: 2rem;">监护人</td>
						<td style="width: 2rem;">联系电话</td>
						<td style="width: 2rem;">备注</td>
						<td style="width: 3rem;">操作</td>
					</tr>
				</thead>
				<tbody class="tbody">
					<tr v-for="item,index in studentList">
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td>{{item.name}}</td>
						<td>
							<span class="operate_btn" @click="openEdit(item)">查看</span> &nbsp;
							<span class="operate_btn" @click="toDelete(item.clueChannelId)">转班</span> &nbsp;
							<span class="operate_btn" @click="toDelete(item.clueChannelId)">毕业/离园</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="param.currPage" @size-change="pageSizeChange" @current-change="pageIndexChange" :total="count">
		</el-pagination>
	</div>
</template>

<script>
	var vm;
	export default {
		data() {
			return {
				param: {
					campusId: this.$store.state.campusId,
					schoolYearId: "",
					gradeTypeId: "",
					classId: "",
					keyword: "",
					currPage: 1,
					pageSize: 10
				},
				studentList: [],
				count: 0,
				entryTime: "",
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				}
			}
		},
		computed: {
			schoolYearList: function() {
				return this.$parent.schoolYearList;
			},
			classList: function() {
				return this.$parent.classList;
			}
		},
		methods: {
			search(currPage) {
				vm.param.currPage = currPage || 1;

				api.studentList(vm.param).then(data => {
					//				vm.studentList = data.list;
					vm.studentList = [{
						name: "小明"
					}, {
						name: "小明"
					}, {
						name: "小明"
					}];
					vm.count = data.totalCount;
				})
			},
			campusChange() { //校区改变
				vm.param.campusId = vm.$store.state.campusId;
				vm.search();
			},
			pageSizeChange(val) { //页条数发生改变
				vm.param.pageSize = val;
				vm.search();
			},
			pageIndexChange(val) { //页码发生改变
				vm.param.currPage = val;
				vm.search(val);
			},
		},
		created() {
			vm = this;
			vm.search();
		}
	}
</script>

<style scoped src="@/style/module/table.css"></style>
<style scoped>
	.panel {
		background-color: white;
		border: 0.01rem solid #ededed;
		border-radius: 0.1rem;
		padding: 0 0.3rem 0.3rem 0.3rem;
		color: #666666;
	}
	
	.condition {
		padding-bottom: 0.1rem;
	}
	
	.row_one {
		padding: 0.2rem 0 0.1rem 0;
		overflow: hidden;
	}
</style>